<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('全控件演示示例')}`">{{ $t('全控件演示示例') }}</t>
            <li>
                属性<span class="s-code">fields</span>是个由<span class="s-code">Object</span>组成的数组，里面每一个对象表示一个表单项控件的相关配置；
                下方 <el-button type="info" size="small" @click="scroll('公共配置项【fields】', 10)">公共配置项【fields】</el-button> 表格中列举了每个控件都可以传入的公共配置项
            </li>
            <li>
                每个表单项控件的类型是由<span class="s-code">Object</span>对象内的<span class="s-code">type</span>指定的，
                并且不同的控件的类型还分别支持配置不同的特定配置字段，
                你可以从 <el-button type="info" size="small" @click="scroll('表单项类型【fields】', 12)">表单项类型【fields】</el-button> 表格中点击控件类型进入查看特定配置字段详情
            </li>
            <li>
                <span class="s-code">fields</span>支持传入以下控件配置对象，一共<span class="s-code-gray">30</span>余种，基本覆盖了所有的应用场景；
                下方示例仅举例了每种控件的基础用法，若想了解更多的高阶用法，请从左侧页面菜单 <el-tag type="success" effect="dark">表单元素组件</el-tag> 点击进入查看各个控件文档及示例
            </li>
            <li>
                <span class="s-code">row-field-size</span>用于配置表单一行展示多少个控件
            </li>
            <li>
                <span class="s-code">form</span>用于配置表单的初始数据，若未配置，组件内部会根据控件类型来自动生成一个初始表单对象
            </li>
            <li>
                <span class="s-code">@submit</span>是点击提交抛出的方法，该方法有两个参数，第一个为当前表单数据<span class="s-code">form</span>，第二个是清除提交按钮加载中状态的回调方法<span class="s-code">callback</span>
            </li>
        </template>
        <sib-form
            ref="formRef"
            :fields="fields"
            :form="formData"
            :row-field-size="4"
            @item-change="itemChange"
            @submit="submit"
            @reset="itemChange">
        </sib-form>
        <pre-code v-if="preCode.length" :code="preCode" style="height: 300px;"></pre-code>
    </example>
</template>

<script>
import { ref, reactive, nextTick } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';

export default {
    setup() {
        const store = useStore();
        const formData = reactive({
            label: 'Hello World！',
        });
        const fields = ref([
            {
                label: '单行文本输入框',
                code: 'text',
                type: 'text',
            },
            {
                label: '文本输入连接框',
                code: 'inputrange',
                type: 'inputrange',
            },
            {
                label: '密码输入框',
                code: 'password',
                type: 'password',
            },
            {
                label: '文本展示控件',
                code: 'label',
                type: 'label',
            },
            {
                label: '数字输入框',
                code: 'number',
                type: 'number',
            },
            {
                label: '数值区间输入框',
                code: 'numberrange',
                type: 'numberrange',
            },
            {
                label: '下拉选择框',
                code: 'select',
                type: 'select',
                options: Array(2).fill().map((_, i) => ({ label: `选项${i}`, value: i })),
            },
            {
                label: '下拉选择器',
                code: 'dropselect',
                type: 'dropselect',
                options: Array(2).fill().map((_, i) => ({ label: `选项${i}`, value: i })),
            },
            {
                label: '列表选择框',
                code: 'table',
                type: 'table',
                searchConfig: {
                    fields: [{ label: '姓名', code: 'name', type: 'text' }],
                },
                tableColumn: [
                    { label: '姓名', code: 'name' },
                    { label: '人员编码', code: 'code' },
                ],
                tableData: [
                    { name: '张三', code: '001', id: '1' },
                    { name: '李四', code: '002', id: '2' },
                    { name: '王五', code: '003', id: '3' },
                    { name: '奔跑的提款机', code: '666', id: '4' },
                    { name: '二蛋快跑别管我', code: '004', id: '5' },
                    { name: '望哥', code: '005', id: '6' },
                    { name: '旗鼓相当的对手', code: '006', id: '7' },
                ],
            },
            {
                label: '树选择器框',
                code: 'tree',
                type: 'tree',
                filterable: true,
                requestConfig: {
                    url: '/api/tree-data.json',
                    method: 'get',
                    params: {},
                },
            },
            {
                label: '级联选择器',
                code: 'cascader',
                type: 'cascader',
                options: [
                    {
                        label: 'IT研发',
                        value: 'ityanfa',
                        children: [
                            {
                                label: '前端组',
                                value: 'qianduan',
                                children: [
                                    {
                                        label: '飞天老李',
                                        value: 'feitianlaoli',
                                    },
                                    {
                                        label: '法外狂徒张三',
                                        value: 'zhangsan',
                                    },
                                    {
                                        label: '瑟瑟发抖的望仔',
                                        value: 'xw',
                                    },
                                ],
                            },
                            {
                                label: '后端组',
                                value: 'houduan',
                                children: [
                                    {
                                        label: '带薪拉屎老六',
                                        value: 'laoliu',
                                    },
                                    {
                                        label: '二蛋快跑别管我',
                                        value: 'dasima',
                                    },
                                ],
                            },
                        ],
                    },
                ],
            },
            {
                label: '单选框',
                code: 'radio',
                type: 'radio',
                options: Array(2).fill().map((_, i) => ({ label: `选项${i}`, value: i })),
            },
            {
                label: '年份选择',
                code: 'year',
                type: 'year',
            },
            {
                label: '月份选择',
                code: 'month',
                type: 'month',
            },
            {
                label: '月份区间选择',
                code: 'monthrange',
                type: 'monthrange',
            },
            {
                label: '复选框',
                code: 'check',
                type: 'check',
                options: Array(2).fill().map((_, i) => ({ label: `选项${i}`, value: i })),
            },
            {
                label: '日期选择(单选)',
                code: 'date',
                type: 'date',
            },
            {
                label: '日期选择(多选)',
                code: 'dates',
                type: 'dates',
            },
            {
                label: '日期区间选择',
                code: 'daterange',
                type: 'daterange',
            },
            {
                label: '周选择',
                code: 'week',
                type: 'week',
            },
            {
                label: '日期时间选择',
                code: 'datetime',
                type: 'datetime',
            },
            {
                label: '日期时间区间选择',
                code: 'datetimerange',
                type: 'datetimerange',
            },
            {
                label: '时分秒选择',
                code: 'shifenmiao',
                type: 'time',
            },
            {
                label: '时分秒区间选择',
                code: 'shifenmiaorange',
                type: 'time',
                isRange: true,
            },
            {
                label: '时分选择',
                code: 'shifen',
                type: 'time',
                format: 'HH点mm分',
                valueFormat: 'HH:mm',
            },
            {
                label: '时分区间选择',
                code: 'shifenrange',
                type: 'time',
                format: 'HH点mm分',
                valueFormat: 'HH:mm',
                isRange: true,
            },
            {
                label: '固定时间点选择',
                code: 'droptime',
                type: 'droptime',
            },
            {
                label: '多行文本输入框',
                code: 'textarea',
                type: 'textarea',
            },
            {
                label: '上传控件',
                code: 'upload',
                type: 'upload',
                listType: 'picture-card',
                autoUpload: false,
                limit: 1,
                showTips: false,
            },
            {
                label: '滑块',
                code: 'slider',
                type: 'slider',
            },
            {
                label: '开关',
                code: 'switch',
                type: 'switch',
            },
            {
                label: '颜色选择器',
                code: 'color',
                type: 'color',
            },
        ]);
        const preCode = ref('');
        const formRef = ref(null);

        const submit = (form, cb) => {
            console.log('form: ', form);
            ElMessage.warning('点击提交');
            setTimeout(() => {
                ElMessage.success('关闭提交按钮Loading');
                cb();
            }, 3000);
        };

        return {
            formRef,
            formData,
            fields,
            preCode,
            submit,
            itemChange() {
                preCode.value = '';
                nextTick(() => {
                    preCode.value = JSON.stringify(formRef.value.currentForm, null, 8);
                });
            },
            scroll(id, index) {
                const dom = document.getElementById(id);
                if (dom) dom.scrollIntoView({ behavior: 'smooth', inline: 'nearest' });
                store.commit('updateCurrentLinkIndex', index);
            },
            templateString: `<template>
    <sib-form
        :fields="fields"
        :form="formData"
        :row-field-size="4"
        @submit="submit">
    </sib-form>
</template>

<script>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

export default {
    setup() {
        const formData = reactive({
            label: 'Hello World！',
        });
        
        const fields = ref([
            {
                label: '单行文本输入框',
                code: 'text',
                type: 'text',
            },
            {
                label: '文本输入连接框',
                code: 'inputrange',
                type: 'inputrange',
            },
            {
                label: '密码输入框',
                code: 'password',
                type: 'password',
            },
            {
                label: '文本展示控件',
                code: 'label',
                type: 'label',
            },
            {
                label: '数字输入框',
                code: 'number',
                type: 'number',
            },
            {
                label: '数值区间输入框',
                code: 'numberrange',
                type: 'numberrange',
            },
            {
                label: '下拉选择框',
                code: 'select',
                type: 'select',
                options: Array(2).fill().map((_, i) => ({ label: \`选项\${i}\`, value: i })),
            },
            {
                label: '下拉选择器',
                code: 'dropselect',
                type: 'dropselect',
                options: Array(2).fill().map((_, i) => ({ label: \`选项\${i}\`, value: i })),
            },
            {
                label: '列表选择框',
                code: 'table',
                type: 'table',
                searchConfig: {
                    fields: [{ label: '姓名', code: 'name', type: 'text' }],
                },
                tableColumn: [
                    { label: '姓名', code: 'name' },
                    { label: '人员编码', code: 'code' },
                ],
                tableData: [
                    { name: '张三', code: '001', id: '1' },
                    { name: '李四', code: '002', id: '2' },
                    { name: '王五', code: '003', id: '3' },
                    { name: '奔跑的提款机', code: '666', id: '4' },
                    { name: '二蛋快跑别管我', code: '004', id: '5' },
                    { name: '望哥', code: '005', id: '6' },
                    { name: '旗鼓相当的对手', code: '006', id: '7' },
                ],
            },
            {
                label: '树选择器框',
                code: 'tree',
                type: 'tree',
                filterable: true,
                requestConfig: {
                    url: '/api/tree-data.json',
                    method: 'get',
                    params: {},
                },
            },
            {
                label: '级联选择器',
                code: 'cascader',
                type: 'cascader',
                options: [
                    {
                        label: 'IT研发',
                        value: 'ityanfa',
                        children: [
                            {
                                label: '前端组',
                                value: 'qianduan',
                                children: [
                                    {
                                        label: '飞天老李',
                                        value: 'feitianlaoli',
                                    },
                                    {
                                        label: '法外狂徒张三',
                                        value: 'zhangsan',
                                    },
                                    {
                                        label: '瑟瑟发抖的望仔',
                                        value: 'xw',
                                    },
                                ],
                            },
                            {
                                label: '后端组',
                                value: 'houduan',
                                children: [
                                    {
                                        label: '带薪拉屎老六',
                                        value: 'laoliu',
                                    },
                                    {
                                        label: '二蛋快跑别管我',
                                        value: 'dasima',
                                    },
                                ],
                            },
                        ],
                    },
                ],
            },
            {
                label: '单选框',
                code: 'radio',
                type: 'radio',
                options: Array(2).fill().map((_, i) => ({ label: \`选项\${i}\`, value: i })),
            },
            {
                label: '年份选择',
                code: 'year',
                type: 'year',
            },
            {
                label: '月份选择',
                code: 'month',
                type: 'month',
            },
            {
                label: '月份区间选择',
                code: 'monthrange',
                type: 'monthrange',
            },
            {
                label: '复选框',
                code: 'check',
                type: 'check',
                options: Array(2).fill().map((_, i) => ({ label: \`选项\${i}\`, value: i })),
            },
            {
                label: '日期选择(单选)',
                code: 'date',
                type: 'date',
            },
            {
                label: '日期选择(多选)',
                code: 'dates',
                type: 'dates',
            },
            {
                label: '日期区间选择',
                code: 'daterange',
                type: 'daterange',
            },
            {
                label: '周选择',
                code: 'week',
                type: 'week',
            },
            {
                label: '日期时间选择',
                code: 'datetime',
                type: 'datetime',
            },
            {
                label: '日期时间区间选择',
                code: 'datetimerange',
                type: 'datetimerange',
            },
            {
                label: '时分秒选择',
                code: 'shifenmiao',
                type: 'time',
            },
            {
                label: '时分秒区间选择',
                code: 'shifenmiaorange',
                type: 'time',
                isRange: true,
            },
            {
                label: '时分选择',
                code: 'shifen',
                type: 'time',
                format: 'HH点mm分',
                valueFormat: 'HH:mm',
            },
            {
                label: '时分区间选择',
                code: 'shifenrange',
                type: 'time',
                format: 'HH点mm分',
                valueFormat: 'HH:mm',
                isRange: true,
            },
            {
                label: '固定时间点选择',
                code: 'droptime',
                type: 'droptime',
            },
            {
                label: '多行文本输入框',
                code: 'textarea',
                type: 'textarea',
            },
            {
                label: '上传控件',
                code: 'upload',
                type: 'upload',
                listType: 'picture-card',
                autoUpload: false,
                limit: 1,
                showTips: false,
            },
            {
                label: '滑块',
                code: 'slider',
                type: 'slider',
            },
            {
                label: '开关',
                code: 'switch',
                type: 'switch',
            },
            {
                label: '颜色选择器',
                code: 'color',
                type: 'color',
            },
        ]);

        const submit = (form, cb) => {
            console.log('form: ', form);
            ElMessage.warning('点击提交');
            setTimeout(() => {
                ElMessage.success('关闭提交按钮Loading');
                cb();
            }, 3000);
        };

        return { formData, fields, submit };
    },
};
<\/script>`,
        };
    },
};
</script>
